<template>
    <div class="app-container">
        <h2 class="title">点餐系统总后台管理</h2>
        <!--<div>-->
        <!--<h3>多文件上传</h3>-->
        <el-upload
          list-type="picture-card"
          action=""
          multiple
          :auto-upload="false"
          :on-change="handleFilesChange"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove">
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
        <div class="action-container">
          <el-button type="primary"
                     @click="uploadFile"
                     :loading="btnLoading"
                     icon="el-icon-upload">上传</el-button>
        </div>
      <!--</div>-->
        <!--<div>-->
          <!--<h3>表格图片预览</h3>-->
            <!--<el-table-->
                    <!--:data="tableData"-->
                    <!--border-->
                    <!--style="width: 100%">-->
                <!--<el-table-column-->
                        <!--prop="name"-->
                        <!--label="姓名"-->
                        <!--width="180">-->
                <!--</el-table-column>-->
                <!--<el-table-column-->
                        <!--label="照片">-->
                    <!--<template slot-scope="scope">-->
                        <!--<img src="./photo.jpg" width="200px" @click="previewTablePhoto"/>-->
                    <!--</template>-->
                <!--</el-table-column>-->
            <!--</el-table>-->
            <!--<el-dialog class="tablePhotoPreviewContainer"-->
                    <!--:visible.sync="tablePhotoVisible"-->
                    <!--:show-close="false">-->
                <!--<img  :src="tablePhoto" alt="">-->
            <!--</el-dialog>-->
        <!--</div>-->
        <!--<div>-->
            <!--<h3>图表</h3>-->
          <!--<mixed></mixed>-->

        <!--</div>-->
        <!--<div>-->
            <!--<h3>Excel导出</h3>-->
            <!--<div>-->
                <!--<div class="action-container">-->
                    <!--<el-button type="primary" @click="_export">导出Excel</el-button>-->
                <!--</div>-->
                <!--<el-table-->
                        <!--:data="testData"-->
                        <!--border-->
                        <!--ref="tb1">-->
                    <!--<el-table-column-->
                            <!--prop="name"-->
                            <!--label="name">-->
                    <!--</el-table-column>-->
                    <!--<el-table-column-->
                            <!--prop="key"-->
                            <!--label="key">-->
                    <!--</el-table-column>-->
                <!--</el-table>-->
            <!--</div>-->
    <!--</div>-->
        <!--<div>-->
            <!--<h3>富文本编辑器</h3>-->
            <!--<rich-text-editor></rich-text-editor>-->
        <!--</div>-->
    </div>
</template>

<script>
import { uploadFile } from '../file/api/upload'
import richTextEditor from '@/components/richTextEditor'
import Mixed from "@/components/charts/mixed";

export default {
  // components: { mixed },
  components: {Mixed, richTextEditor },
  name: 'index',
  data () {
    return {
      module: "index",
      dialogImageUrl: '',
      dialogVisible: false,
      fileList: [],
      btnLoading: false,
    }
  },
  mounted () {
  },
  methods: {
    /*
    * 移除文件
    * */
    handleRemove (file, fileList) {
      this.fileList.forEach((item, index) => {
        if (file.raw.uid === item.uid) {
          this.fileList.splice(index, 1)
        }
      })
    },
    /*
    * 预览
    * */
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    /*
    * 文件发生改变
    * */
    handleFilesChange (file) {
      this.fileList.push(file.raw)
    },
    uploadFile () {
      if (this.fileList.length === 0) {
        this.$message({
          message: '请选择图片',
          type: 'warning'
        })
      } else {
        this.btnLoading = true
        let form = new FormData()
        this.fileList.forEach(value => {
          form.append('files', value)
        })
        form.append('module', 'token')
        uploadFile(form,this.module).then(response => {
          console.log(response)
          this.$message({
            message: response.msg,
            type: 'success'
          })
          this.fileList = []
          this.btnLoading = false
        }).catch(() => {
          this.btnLoading = false
        })
      }
    },
  }
}
</script>

<style scoped>
    .title{
        text-align: center;
    }
   .action-container{
       margin-top: 10px;
   }
    .tinymce-container{
        position: relative;
    }
    /* 保证样式用于子组件 */
    .tinymce-container >>> .mce-fullscreen{
        z-index: 10000;
    }
    .upload-image{
        position: absolute;
        top: 4px;
        right: 4px;
    }
</style>
